Simple Image Rollover script

Move mouse over this test links.

Test link3.

One can ask, is there anything new that can be done with such a simple thing like image swap on mouse over? OK, see for yourself. This example shows you how to to make rollover script very easy to use. Let's start with link HTML code:

 <a href="some.html" 
    onMouseOver="VMaxOver(this,'im1','image_on.gif')"
 ><IMG NAME="im1" SRC="image_off.gif" broder=0></a>

Did you notice, that this example has only onMouseOver event handler? Yes. that's it! There is no need for onMouseOut with this script, as OnMouseOut handler will be added automatically to link with the first call of onMouseOver handler.
VMaxOver function call has 3 parameters. The first one must always be this, it passes a reference to link where the event happens into function call. The second parameter is the name of the image as defined by the NAME attribute of IMG tag. And the last parameter is the URL of the image file for the mouseover state.

Here is complete script code.

<script> 
/*****************************************
 * Simple RollOver script by Virtual_Max 
 * http://come.to/vmax 
 * Free to use untill this notice  present 
 * unchanged in all copies and derivatives
 *****************************************/
function VMaxOver(link,id,overIm) {
  if(document.images) {
    im            = document.images[id];
    im.outIm      = new Image();
    im.overIm     = new Image();
    im.outIm.src  = document.images[id].src;
    im.overIm.src = overIm;
    im.src        =im.overIm.src;
    link.onmouseout  = new Function("var im=document."+id+"; im.src=im.outIm.src;");
    link.onmouseover = new Function("var im=document."+id+"; im.src=im.overIm.src;");
  }
}
</script>

Firstly, this script tests to see if the browser supports the image objects to prevent problems with old browsers which do not support work with images. Secondly, the trick is to extend the Image object with two additional properties

    im.outIm      = new Image();
    im.overIm     = new Image();

These properties will contain image objects for Out and Over states of the image. To initialize the source of outIm property this script uses the original image source

    im.outIm.src  = document.images[id].src;

This trick is quite useful to reduce and simplify onmouseout handlers code so you do not need to specify handler parameters' url of image for mouseout, it will just use one already specified in <IMG SRC="image_off.gif">

And the last trick is to create new handlers for the link

    link.onmouseout  = new Function("var im=document."+id+"; im.src=im.outIm.src;");
    link.onmouseover = new Function("var im=document."+id+"; im.src=im.overIm.src;");

First of all, it creates a new Function for onmouseout event on the link, so you do not need to add OnMouseOut handler to <A ... > tag. The second line replaces the original link OnMouseOver specified within HTML code of

Terms of use

This script can be used absolutely free in any design until credits are made to Virtual_Max and link is made back to http://come.to/vmax - which is provided inside the script comments in the HTML code.
Redistributing and mirroring of this script and it's documentation is strictly prohibited.
Instead, please, provide link to this script home page at Virtual_max's cafe.